<template>
  <el-row :gutter="15">
    <el-col
      :xs="24"
      :sm="12"
      :md="12"
    >
      <el-card>
        <h1 class="text-center">
          A 款
        </h1>
        <chart
          :chart-data="chartDataA"
          type="other"
          num="A"
        />
      </el-card>
    </el-col>
    <el-col
      :xs="24"
      :sm="12"
      :md="12"
    >
      <el-card>
        <h1 class="text-center">
          B 款
        </h1>
        <chart
          :chart-data="chartDataB"
          type="other"
          num="B"
        />
      </el-card>
    </el-col>
    <el-col
      :xs="24"
      :sm="12"
      :md="12"
    >
      <el-card>
        <h1 class="text-center">
          C D 款
        </h1>
        <el-row>
          <el-col
            :xs="24"
            :sm="12"
            :md="12"
          >
            <chart
              :chart-data="chartDataC"
              type="pie"
              num="C"
            />
          </el-col>
          <el-col
            :xs="24"
            :sm="12"
            :md="12"
          >
            <chart
              :chart-data="chartDataD"
              type="pie"
              num="D"
            />
          </el-col>
        </el-row>
      </el-card>
    </el-col>
    <el-col
      :xs="24"
      :sm="12"
      :md="12"
    >
      <el-card>
        <h1 class="text-center">
          E F 款
        </h1>
        <el-row>
          <el-col
            :xs="24"
            :sm="12"
            :md="12"
          >
            <chart
              :chart-data="chartDataE"
              type="pie"
              num="E"
            />
          </el-col>
        </el-row>
      </el-card>
    </el-col>
  </el-row>
</template>

<script lang="ts" setup>
import chart from './echart/chart.vue'
import { reactive } from 'vue'
import { IEchartsData, IEchartsDataItem } from '@/model/echarts/echartsInter'

const num: Array<string> = ['A', 'B', 'C', 'D', 'E', 'F', 'G']
const category: Array<string> = ['7/10', '7/11', '7/12', '7/13', '7/14', '7/15', '7/16', '7/17', '7/18']
const otherChartData:Record<string, IEchartsData> = {}
num.forEach(n => {
  const data = []
  let leg = 3 // 几条线
  if (n === 'E' || n === 'C' || n === 'D' || n === 'F') {
    leg = 1
  }
  for (let i = 0; i < leg; i++) {
    const value:Array<{name:string, value:number}> = []
    category.forEach(c => {
      value.push({ name: c, value: parseFloat((Math.random() * 700).toFixed(2)) })
    })
    data.push({
      name: '类型' + i,
      unit: 'kW',
      value: value
    } as IEchartsDataItem)
  }
  otherChartData[n] = {
    data
  }
})

const chartDataA:IEchartsData = reactive(otherChartData.A)
const chartDataB:IEchartsData = reactive(otherChartData.B)
const chartDataC:IEchartsData = reactive(otherChartData.C)
const chartDataD:IEchartsData = reactive(otherChartData.D)
const chartDataE:IEchartsData = reactive(otherChartData.E)
// const chartDataF:IEchartsData = reactive(otherChartData.F)
// const chartDataG:IEchartsData = reactive(otherChartData.G)
</script>
<style scoped lang="scss">
.el-card{
  background: #273c75;
  h1{
    color:#fff
  }
}
.el-col{
  margin-bottom: 15px;
}
</style>
